<template>
  <div class="tabbar">
    <div class="Left">
      <el-icon @click="changeIcon">
        <component :is="LayoutSettingStore.IsFold ? 'Fold' : 'Expand'"></component>
      </el-icon>
      <el-breadcrumb separator-icon="ArrowRight">
        <el-breadcrumb-item
          v-for="(item, index) in $route.matched.filter(t => t.meta.name != '')"
          :key="index"
          :to="{ path: item.path }"
        >
          <el-icon>
            <component :is="item.meta.icon"></component>
          </el-icon>
          <span>{{ item.meta.name }}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="Right">
      <el-button icon="Refresh" circle @click="RefreshData" />
      <el-button icon="Crop" circle @click="FullScreen" />
      <el-button icon="Setting" circle />
      <el-avatar :size="30" :src="useStore.avatar" />
      <el-dropdown>
        <span class="el-dropdown-link">
          {{ useStore.userName }}
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import useLayoutSettingStore from '@/store/modules/setting.ts'
import useUserStore from '@/store/modules/user'
const LayoutSettingStore = useLayoutSettingStore()
const $route = useRoute()
const useStore = useUserStore()
const $router = useRouter()

const changeIcon = () => {
  LayoutSettingStore.IsFold = !LayoutSettingStore.IsFold
  console.log($route.matched)
}
const RefreshData = () => {
  LayoutSettingStore.IsRefresh = true
}
const FullScreen = () => {
  let full = document.fullscreenElement
  if (full) {
    document.exitFullscreen()
  } else {
    document.documentElement.requestFullscreen()
  }
}

const logout = () => {
  useStore
    .logout()
    .then(() => {
      $router.push({ path: '/login' })
    })
    .catch(e => {})
}
</script>

<style lang="scss" scoped>
.tabbar {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .Left {
    display: flex;
    align-items: center;

    .el-icon {
      margin-right: 10px;
    }
  }

  .Right {
    display: flex;
    align-items: center;

    .el-avatar,
    .el-dropdown {
      margin-left: 10px;
    }
  }
}
</style>
